<template>
  <div>
    <div> <!--卡片视图区域-->
      <el-card>
        <div>
          <!--订单表格区域-->
          <el-table :data="orderList" border stripe
                    :summary-method="getSummaries">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="订单编号" prop="scid" width="300px"></el-table-column>
            <el-table-column label="订单价格" prop="cvalue"></el-table-column>
            <el-table-column label="是否付款" prop="ispay">
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.ispay === 0">未付款</el-tag>
                <el-tag type="success" v-else>已付款</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="课程名称" prop="cname">
              <template slot-scope="scope">
                {{scope.row.cname}}
              </template>
            </el-table-column>
            <el-table-column label="下单时间" prop="buydate" width="140px">
              <template slot-scope="scope">
                <!--通过作用域插槽的形式 调用时间过滤器-->
                {{scope.row.buydate | dataFormat}}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!--修改按钮-->
                <el-button type="primary" size="mini">申请退款</el-button>
                <!--地址按钮-->
                <el-button type="success" size="mini" icon="el-icon-location"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        orderList: [],
        ispay: '',
        scid: '',
        total: 0
      }
    },
    methods:{
      getOrderList(){
        this.$axios
        .get("/getStudentCourse",{
          params:{
            sid: sessionStorage.getItem("uid")
          }
        }).then(res =>{
          if(res.data.code === 200){
            this.orderList = res.data.data;
          }
        })
      },
    },
    mounted() {
      this.getOrderList();
    }
  }
</script>

<style scoped>

</style>
